<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>注册</title>
<meta charset="utf-8">
<style type="text/css">
	span {
		color: red;
	}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	function reload() {
		var img = document.getElementById("vcode");
		// 此处路径要修改，之前的Servlet变成参数
		img.src = "UserServlet?action=verificationCode&" + (new Date().getTime());
	}
</script>
<script>
	function checkAll() {
		checkUsername();
		checkPwd();
		checkPwd2();
		// 通过显示Msg的span标签的color式样判断是否有错
		var allErrMsg = "";
		allErrMsg += $("#usernameMsg").val();
		allErrMsg += $("#pwdMsg").val();
		allErrMsg += $("#pwd2Msg").val();
		if (allErrMsg != "") {
			console.log("===输入check失败===");
			return false;
		}
		return true
	}

	function checkUsername() {
		var $username = $("[name='username']");
		var $msg = $("#usernameMsg");

		// 用户名输入检测（必须输入）
		if ($username.val().trim().length == 0) {
			$msg.text("用户名不能为空");
			return false;
		}
		$msg.text("");
		// 用户名存在检测【需要后台查询数据库，JQuery加AJAX的知识】
		$.get("RegistCheckServlet", {
			username : $username.val()
		}, function(data) {
			checkResult = data.userExsit; // 检测结果
			if (data.userExsit) {
				$msg.text("该用户名已被注册!!!");
			} else {
				$msg.text("该用户名可以使用");
			}
		}, "json");
	}

	function checkPwd() {
		var $msg = $("#pwdMsg");
		// 密码检测【JavaScript正则表达式知识】
		var pwd = $("[name='pwd']").val();
		var regExp = /^[\w]{5,8}$/;
		var ret = regExp.test(pwd);
		if (!ret) {
			$msg.text("密码必须是5~8位数字或英文字母");
		} else {
			$msg.text("");
		}
	}

	function checkPwd2() {
		// 密码确认检测
		// 【注意：Javascript对象用value属性取值；jquery对象用val()函数取值】
		var pwd = $("[name='pwd']").val();
		var pwd2 = $("[name='pwd2']").val();
		var $msg = $("#pwd2Msg");
		if (pwd != pwd2) {
			$msg.text("两次输入的密码不一致");
		} else {
			$msg.text("");
		}
	}
</script>
<script>
	$(function() {
		// 使用JQuery绑定事件
		$("[name='username']").blur(function() {
			checkUsername();
		});
		$("[name='pwd']").blur(function() {
			checkPwd();
		});
		$("[name='pwd2']").blur(function() {
			checkPwd2();
		});
	});
</script>

</head>

<body>
	<form action="UserServlet?action=regist" method="post" onsubmit="return checkAll()">
		用户名：<input type="text" name="username"> <span id="usernameMsg"></span><br>
		密码：<input type="password" name="pwd"> <span id="pwdMsg"></span><br> 
		密码确认：<input type="password" name="pwd2"><span id="pwd2Msg"></span><br>
		验证码：<input type="text" name="vcode">
		<img id="vcode" src="UserServlet?action=verificationCode">
		<a href="javascript:reload();">换一个</a> <br>
		<%-- 消息提示 --%>
		<span>${msg}</span><br>
		<input type="submit" value="注册">
	</form>
</body>
</html>